<template>
    <div>
        <el-row>
            <el-col :span="2">
                <el-text>用户名</el-text>
            </el-col>
            <el-col :span="3">
              <el-input placeholder="请输入用户名" v-model="info.userName"></el-input>
            </el-col>
        </el-row>
        <el-row style="margin-top: 2ch;">
            <el-col :span="2" >
                <el-text>密码</el-text>
            </el-col>
            <el-col :span="3">
                <el-input placeholder="请输入密码" v-model="info.pwd" type="password"></el-input>
            </el-col>
        </el-row>
        <el-row>
            <el-button type="primary" @click="login">登录</el-button>
        </el-row>
    </div>
</template>

<script setup lang="ts">
  import axios from 'axios'
  import { reactive, ref,onMounted } from 'vue'
  import { useGoodStore } from '@/stores/counter';
  import { ElMessage } from 'element-plus'
  const useStore=useGoodStore();
 const info=ref({
    userName:"",
    pwd:""
 })
 const login=()=>{
    if(info.value.userName=="")
    {
        ElMessage.error('用户名不能为空');
        return;
    }
    if(info.value.pwd=="")
    {
        ElMessage.error('密码不能为空');
        return;
    }
    axios.post('/api/User/Login?userName='+info.value.userName+'&pwd='+info.value.pwd)
    .then(res=>{
        if(res.data.isSuc)
        {
            useStore.isLogin=true;         
            ElMessage.success(res.data.msg);   
            //token令牌
            axios.defaults.headers.common["Authorization"] =
            "Bearer " + res.data.data;

            console.log(axios.defaults.headers.common.Authorization);
        }
        else
        {
            ElMessage.error(res.data.msg);
        }
    })
 }

</script>